<script lang="ts" setup>
import official from '@/icons/ido-official.svg?component'
import twitter from '@/icons/ido-twitter.svg?component'
import medium from '@/icons/ido-medium.svg?component'
import telegram from '@/icons/ido-telegram.svg?component'
import timerIcon from '@/icons/clock.svg?component'
import bscIcon from '@/assets/images/home/bsc.png'
import idoBanner2 from '@/assets/images/home/new-ido-banner-2.png'
import Contact from '@/components/Contact.vue'
import {list} from '@/views/fakeDb'
import {IDO} from "@/types/ido"
import {ref} from "vue"

import {formatAddress} from '@/utils/formatters'

import {useRoute} from "vue-router";
import {useI18n} from "vue-i18n";

const route = useRoute()
console.log('param:', route.params.id)
const {t} = useI18n()

// @ts-ignore
const idoId = parseInt(route.params.id)
const ido: IDO = list.find((item: IDO) => item.id === idoId)
console.log('ido:', ido)

const tab = ref<string>('one')

// const openUrl = (url: string) => {
//   window.open(url)
// }

const poolInfoTable = {
  header: t('message.ido.detail.pool.title'),
  cols: [
    {'Opens': ido.state === 0 ? 'TBA' : ido.openTime},
    {'Min.Allocation': ido.minAmount},
    {'Max.Allocation': ido.state === 0 ? 'TBA' : ido.maxAmount},
    {'Cap': ido.state === 0 ? 'TBA' : ido.totalProgress + ido.symbol},
    {'Participants': ido.state === 0 ? 'TBA' : ido.participant},
    {'Total Funds Swapped': ido.state === 0 ? 'TBA' : ido.curProgress + ido.symbol},
    {'Access': ido.access}
  ]
}

const tokenInfoTable = {
  header: t('message.ido.detail.token.title'),
  cols: [
    {'Name': ido.symbolName},
    {'Token Symbol': ido.symbol},
    {'Total Supply': ido.state === 0 ? '——' : ido.totalSupply},
    {'Address': ido.state === 0 ? '——' : formatAddress(ido.tokenAddress)}
  ]
}
</script>

<template>
  <div class="relative bg-white">
    <div class="ido-info-wrapper">
      <div class="flex flex-row items-center mt-10 xs:!mt-0">
        <div class="ido-name">{{ ido.symbolName }}</div>
        <div class="network">{{ ido.chainName }}</div>
      </div>
      <div class="ido-card-container">
        <v-card class="ido-item" color="transparent" variant="outlined">
          <v-card-text class="ido-banner-wrapper flex flex-col border-[#BED4FF] p-3">
            <div class="flex flex-row justify-space-between items-center">
              <!--              <bsc-icon class="bsc-icon"></bsc-icon>-->
              <img :src="bscIcon" alt="" class="bsc-icon"/>
              <div class="time flex flex-row items-center">
                <timer-icon class="time-icon"></timer-icon>
                <div class="live" :class="ido.state === 0 ? '!text-[white]' : ido.state === 1 ? 'text-[#94DB89]' : ''">
                  {{ ido.state === 0 ? t('message.ido.list.coming') : t('message.ido.list.live') }}
                </div>
              </div>
            </div>
            <!--            TODO需要换掉-->
            <v-img :src="idoBanner2" class="ido-banner align-self-center"></v-img>
            <div class="contact align-self-center grid grid-cols-4 gap-x-2">
<!--              <official class="contact-way" @click="openUrl(ido.website)"></official>-->
<!--              <twitter class="contact-way" @click="openUrl(ido.twitter)"></twitter>-->
<!--              <medium class="contact-way" @click="openUrl(ido.medium)"></medium>-->
<!--              <telegram class="contact-way" @click="openUrl(ido.telegram)"></telegram>-->
              <official class="contact-way"></official>
              <twitter class="contact-way"></twitter>
              <medium class="contact-way"></medium>
              <telegram class="contact-way"></telegram>
            </div>
          </v-card-text>
        </v-card>
        <v-card class="ido-item" color="#BED4FF" variant="outlined">
          <v-card-text class="amount p-5">
            <div class="flex flex-row justify-space-between text-[12px] font-medium mb-3 text-[#7A7893]">
              <div class="target">{{ t('message.ido.detail.swap') }}</div>
              <div>1 BNB = {{ ido.exchangePrice }} {{ ido.symbol }}</div>
            </div>
            <div class="flex flex-row justify-space-between items-center text-[12px] font-medium mb-4 text-[#2B6EEF]">
              <div class="text-[28px] xs:text-[32px]">
                <!--                TODO-->
                {{ ido.state === 0 ? '--' : ido.total }}
              </div>
              <div>
                <span>{{ ido.state === 0 ? '—' : ido.total }}</span>
                <span class="ml-1">BNB</span>
              </div>
            </div>
            <div class="mb-4 text-[14px] text-[#7A7893]">{{ t('message.ido.detail.close') }}</div>
            <div class="text-[28px] xs:text-[32px] text-[#41CD7D] font-bold">
              {{ ido.state === 0 ? 'TBA' : ido.total }}
            </div>
          </v-card-text>
          <v-card-text class="amount px-5 py-0">
            <div class="progress-label font-medium text-[#7A7893] mb-1">{{ t('message.ido.list.progress') }}</div>

            <v-progress-linear
              value="86"
              height="8"
              rounded
              bg-color="#BED4FF"
              color="#41CD7D"
              bg-opacity="0.8"
            ></v-progress-linear>

            <div class="progress-num mt-2 font-medium flex flex-row justify-space-between">
              <div class="finish-percent text-[#41CD7D]">{{ Math.floor(ido.curProgress / ido.totalProgress) }}%</div>
              <div>
                <span class="finish-num text-[#41CD7D]">{{ ido.state === 0 ? 0 : ido.curProgress }}</span>
                <span class="unFinish-num text-[#7A7893]">/{{ ido.state === 0 ? 0 : ido.totalProgress }}</span>
              </div>
            </div>
          </v-card-text>
          <v-card-actions class="p-5">
            <v-btn
              color="white"
              dark
              class="flex-1 !h-[54px] text-[14px] font-medium rounded-[14px]"
              :class="ido.state === 2 || ido.state === 0 ? 'bg-[#7A7893]' : 'bg-[#2B6EEF]'"
              :disabled="ido.state === 2 || ido.state === 0"
            >
              <v-icon dark>
                mdi-plus
              </v-icon>
              {{ t('message.ido.list.join') }}
            </v-btn>
          </v-card-actions>
        </v-card>
      </div>
    </div>
    <div class="ido-detail-wrapper relative">
      <div class="tabs">
        <v-tabs
          v-model="tab"
          background-color="transparent"
          color="basil"
        >
          <v-tab value="one">{{ t('message.ido.detail.tab.detail') }}</v-tab>
          <v-tab value="two">{{ t('message.ido.detail.tab.about') }}</v-tab>
        </v-tabs>
      </div>
      <div class="ido-detail">
        <v-window v-model="tab">
          <v-window-item value="one">
            <div class="ido-project">
              <div class="ido-table mt-9">
                <div class="ido-table-header">{{ poolInfoTable.header }}</div>
                <div class="ido-table-body">
                  <div class="ido-table-row" v-for="(item, index) in poolInfoTable.cols" :key="index">
                    <div class="ido-table-col label">{{ Object.keys(item)[0] }}</div>
                    <div class="ido-table-col value">{{ Object.values(item)[0] }}</div>
                  </div>
                </div>
              </div>
              <div class="ido-table mt-9 mb-36">
                <div class="ido-table-header">{{ tokenInfoTable.header }}</div>
                <div class="ido-table-body">
                  <div class="ido-table-row" v-for="(item, index) in tokenInfoTable.cols" :key="index">
                    <div class="ido-table-col label">{{ Object.keys(item)[0] }}</div>
                    <div class="ido-table-col value">{{ Object.values(item)[0] }}</div>
                  </div>
                </div>
              </div>
            </div>
          </v-window-item>

          <v-window-item value="two">
            <div class="ido-about xs:mb-[246px]">
              <div class="ido-title">{{ ido.symbolName }}</div>
              <div class="ido-intro">{{ ido.state === 0 ? '--' :ido.about }}</div>
              <div class="ido-sale-title">{{ t('message.ido.detail.about.sale') }}</div>
              <div class="ido-sale">
                <span v-if="ido.state === 0">--</span>
                <span style="white-space: pre-wrap;" v-else>{{ ido.saleDetails }}</span>
              </div>
              <div class="ido-sale-title">{{ t('message.ido.detail.about.release') }}</div>
              <div class="ido-sale mb-20">
                <span v-if="ido.state === 0">--</span>
                <span v-else style="white-space: pre-wrap;">{{ ido.releaseDetails }}</span>
              </div>
            </div>
          </v-window-item>
        </v-window>
      </div>
      <!--    TODO 气泡还没有做-->
    </div>

    <contact class="xs:!hidden"></contact>
  </div>
</template>

<style lang="scss" scoped>
.ido-info-wrapper {
  @apply xl:mx-[358px] lg:mx-[266px] md:mx-[202px] sm:mx-[126px] xs:px-6 xs:py-8;
  .ido-name {
    font-family: DINPro-Bold, DINPro;
    font-weight: bold;
    color: #161615;
    @apply mr-1.5 mb-1 xl:text-4xl lg:text-3xl md:text-2xl sm:text-xl xs:text-[42px] xs:mt-0;
  }

  .network {
    font-size: 12px;
    font-family: DINPro-Medium, DINPro;
    font-weight: 500;
    color: #7A7893;
    @apply xs:mt-0;
  }

  .ido-card-container {
    @apply grid grid-cols-2 gap-x-10 gap-y-6 sm:grid-cols-1 xs:grid-cols-1;

    .ido-item {
      border-radius: 16px;
      @apply w-auto sm:min-w-[462px] xs:w-full;

      .ido-banner-wrapper {
        background: url('../../assets/images/home/new-ido-bg2.png') no-repeat left center;
        background-size: 100% 100%;

        .time {
          padding: 12px 10px;
          background: #2C2B2B;
          border-radius: 13px;
          width: max-content;

          .time-icon {
            width: 16px;
            height: 16px;
            margin-right: 8px;
          }

          .live {
            font-size: 12px;
            font-family: DINPro-Medium, DINPro;
            font-weight: normal;
            color: #94DB89;
          }
        }

        .ido-banner {
          @apply mt-14 mb-14 w-48 h-16 xs:mt-3 xs:mb-3;
        }

        .contact {
          @apply mb-12 xs:mb-3;

          .contact-way {
            cursor: pointer;
            width: 24px;
            height: 24px;
          }
        }
      }
    }
  }
}

.ido-detail-wrapper {
  background: linear-gradient(360deg, #FFFFFF 0%, #CDDFF7 100%);
  @apply w-full mt-9;
  .tabs {
    border-bottom: 2px solid #BED4FF;
    @apply h-[62px] xs:px-6 xs:h-[94px];
    .v-tabs {
      @apply h-[62px] xs:h-[94px] leading-[62px] xl:mx-[358px] lg:mx-[266px] md:mx-[202px] sm:mx-[126px] xs:flex;
    }

    .v-tab {
      font-size: 18px;
      font-family: DINPro-Bold, DINPro;
      font-weight: bold;
      color: #7A7893;
      @apply h-[62px] xs:h-[94px] leading-[62px] xs:flex-1 xs:flex-wrap;
    }

    ::v-deep .v-tab__slider {
      height: 4px;
      background: #2B6EEF;
    }

    .v-slide-group-item--active {
      color: #161615;
    }

    ::v-deep .v-slide-group__content {
      @apply xs:flex-1 xs:whitespace-pre;
    }

    ::v-deep .v-tab:first-child {
      margin-inline-start: 0px !important;
    }

    ::v-deep .v-btn__content {
      @apply xs:whitespace-pre-wrap xs:leading-8 xs:h-[94px];
    }
  }

  .ido-detail {
    @apply xl:mx-[358px] lg:mx-[266px] md:mx-[202px] sm:mx-[126px];
    .ido-project {
      @apply w-full px-6;
      .ido-table {
        font-size: 14px;
        font-family: DINPro-Medium, DINPro;
        font-weight: normal;
        border: 1px solid #BED4FF;
        border-radius: 14px;

        .ido-table-header {
          background: #BED4FF;
          border-radius: 14px 14px 0px 0px;
          color: #161615;
        }

        .ido-table-row {
          border-top: 1px solid #BED4FF;

          .value {
            color: #161615;
          }

          .label {
            color: #7A7893;
          }
        }

        .ido-table-header, .ido-table-row {
          @apply h-14 px-5 flex flex-row justify-between items-center;
        }
      }
    }

    .ido-about {
      @apply xs:px-6;
      .ido-title {
        font-size: 25px;
        font-family: DINPro-Bold, DINPro;
        font-weight: bold;
        color: #161615;
        @apply mt-9 xs:text-[28px] xs:mt-10;
      }

      .ido-intro {
        font-size: 12px;
        font-family: DINPro-Regular, DINPro;
        font-weight: 400;
        color: #7A7893;
        line-height: 16px;
        @apply my-9 xs:mt-10 xs:leading-[22px];
      }

      .ido-sale-title {
        font-size: 14px;
        font-family: DINPro-Bold, DINPro;
        font-weight: bold;
        color: #161615;
        @apply mt-4 xs:mt-0 xs:text-[16px];
      }

      .ido-sale {
        @apply min-h-[118px] xs:mt-2 xs:text-[14px];
      }
    }
  }
}

</style>
